import { useMemo, useState } from "react";

import { Button, Modal, Form, Input, Select } from "antd";
import {
  FreeLayoutProps,
  WorkflowNodeProps,
  WorkflowNodeRenderer,
  Field,
  useNodeRender,
  domUtils,
} from "@flowgram.ai/free-layout-editor";

interface Section {
  sectionName: string;
}
export const SectionEdit = () => (
  <>
    <Form
      name="wrap"
      labelCol={{ flex: '110px' }}
      labelAlign="left"
      labelWrap
      wrapperCol={{ flex: 1 }}
      colon={false}
      style={{ maxWidth: 600 }}
    >
      <Field<Section> name="section">
        {({ field }) => (
          <Form.Item
            label="标的名称"
            name="sectionName"
            rules={[{ required: true }]}
            valuePropName="sectionName"
          >
            <Input
              value={field.value?.sectionName}
              onChange={(e) => field.onChange?.({ ...field.value, sectionName: e.target.value })}
            />
          </Form.Item>
        )}
      </Field>
      <Form.Item label="流转方式" name="circulWay" rules={[{ required: true }]}>
        <Select
          defaultValue="1"
          // style={{ width: 120 }}
          // onChange={handleChange}
          options={[
            { value: '1', label: '转让' },
            { value: '0', label: '出租' },
          ]}
        />
      </Form.Item>
      <Form.Item label="标的类别" name="propertyType" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item label="标的子类别" name="propertyChildType" rules={[{ required: true }]}>
        <Input />
      </Form.Item>

      {/* <Field<string> name="propertyType">
        {({ field }) => (
          <div>
            <label htmlFor="propertyType" style={{ margin: "5px" }}>
              标的类型
            </label>
            <input id="propertyType" readOnly disabled value={field.value} />
          </div>
        )}
      </Field> */}
      <Form.Item label="">
        <Button type="primary" htmlType="submit">
          保存
        </Button>
      </Form.Item>
    </Form>
  </>
);
